<template>
    <div class="app-container">
        <!-- 主要指标卡片 -->
        <div class="indicator-cards">
            <el-card class="indicator-card">
                <div class="card-content">
                    <div class="card-icon">
                        <el-icon>
                            <OfficeBuilding />
                        </el-icon>
                    </div>
                    <div class="card-text">
                        <div class="card-title">在线水厂数量</div>
                        <div class="card-value">{{ plantCount }}座</div>
                    </div>
                </div>
            </el-card>

            <el-card class="indicator-card">
                <div class="card-content">
                    <div class="card-icon">
                        <el-icon>
                            <Watermelon />
                        </el-icon>
                    </div>
                    <div class="card-text">
                        <div class="card-title">在线泵站数量</div>
                        <div class="card-value">{{ pumpStationCount }}座</div>
                    </div>
                </div>
            </el-card>

            <el-card class="indicator-card">
                <div class="card-content">
                    <div class="card-icon">
                        <el-icon>
                            <TrendCharts />
                        </el-icon>
                    </div>
                    <div class="card-text">
                        <div class="card-title">今日压力合格率</div>
                        <div class="card-value">{{ passRate }}%</div>
                    </div>
                </div>
            </el-card>

            <el-card class="indicator-card">
                <div class="card-content">
                    <div class="card-icon">
                        <el-icon>
                            <Warning />
                        </el-icon>
                    </div>
                    <div class="card-text">
                        <div class="card-title">当前报警数量</div>
                        <div class="card-value">{{ alarmCount }}个</div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 图表区域 -->
        <div class="chart-area">
            <!-- 实时压力分布统计 -->
            <el-card class="chart-card">
                <div class="chart-header">
                    <h3>实时压力分布统计</h3>
                    <div class="time-range">最近24小时</div>
                </div>
                <ECharts ref="pressureChart" :option="pressureOption" class="chart-container" autoresize />
            </el-card>

            <!-- 报警类型占比 -->
            <el-card class="chart-card">
                <div class="chart-header">
                    <h3>报警类型占比</h3>
                </div>
                <ECharts ref="alarmChart" :option="alarmOption" class="chart-container" autoresize />
            </el-card>
        </div>

        <!-- 压力振幅排名表格 -->
        <el-card class="ranking-table">
            <div class="table-header">
                <h3>1小时压力振幅站点排名</h3>
            </div>
            <el-table :data="pressureRanking" border style="width: 100%">
                <el-table-column prop="rank" label="排名" width="80" align="center" />
                <el-table-column prop="name" label="站点名称" width="180" />
                <el-table-column label="当前压力值" align="center">
                    <template #default="{ row }">
                        {{ row.currentPressure }} MPa
                    </template>
                </el-table-column>
                <el-table-column label="压力振幅" align="center">
                    <template #default="{ row }">
                        {{ row.amplitude }} MPa
                    </template>
                </el-table-column>
                <el-table-column prop="passRate" label="合格率" align="center">
                    <template #default="{ row }">
                        {{ row.passRate }}%
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{ row }">
                        <el-button type="text" @click="viewDetail(row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Warning, OfficeBuilding, Watermelon, TrendCharts } from '@element-plus/icons-vue'
import ECharts from '@/components/ECharts'

// 基础数据
const plantCount = ref(12)
const pumpStationCount = ref(36)
const passRate = ref(96.8)
const alarmCount = ref(3)

// 压力分布图表配置
const pressureOption = ref({
    tooltip: {
        trigger: 'axis',
        formatter: '{b}<br/>压力值: {c} MPa'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
        axisLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            color: '#666'
        }
    },
    yAxis: {
        type: 'value',
        name: '压力（MPa）',
        min: 0,
        max: 0.5,
        interval: 0.1,
        axisLine: {
            show: true,
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            formatter: '{value}',
            color: '#666'
        },
        splitLine: {
            lineStyle: {
                color: '#eee',
                type: 'dashed'
            }
        }
    },
    series: [{
        data: [0.35, 0.38, 0.42, 0.45, 0.41, 0.39, 0.37, 0.40],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
            width: 3,
            color: '#409EFF'
        },
        itemStyle: {
            color: '#409EFF',
            borderColor: '#fff',
            borderWidth: 2
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(64, 158, 255, 0.3)'
                }, {
                    offset: 1,
                    color: 'rgba(64, 158, 255, 0.1)'
                }]
            }
        }
    }]
})

// 报警类型占比图表配置
const alarmOption = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
        data: ['压力异常', '设备故障', '水质异常', '其他']
    },
    series: [
        {
            name: '报警类型占比',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 45, name: '压力异常', itemStyle: { color: '#F56C6C' } },
                { value: 30, name: '设备故障', itemStyle: { color: '#E6A23C' } },
                { value: 15, name: '水质异常', itemStyle: { color: '#67C23A' } },
                { value: 10, name: '其他', itemStyle: { color: '#909399' } }
            ]
        }
    ]
})

// 压力振幅排名数据
const pressureRanking = ref([
    { rank: 1, name: '清华路加压站', currentPressure: 0.42, amplitude: 0.08, passRate: 95 },
    { rank: 2, name: '西湖路监测点', currentPressure: 0.38, amplitude: 0.07, passRate: 92 },
    { rank: 3, name: '东风路加压站', currentPressure: 0.45, amplitude: 0.06, passRate: 97 },
    { rank: 4, name: '建设路监测点', currentPressure: 0.40, amplitude: 0.05, passRate: 98 },
    { rank: 5, name: '和平路加压站', currentPressure: 0.41, amplitude: 0.05, passRate: 96 },
    { rank: 6, name: '北京路监测点', currentPressure: 0.39, amplitude: 0.04, passRate: 99 },
    { rank: 7, name: '南京路加压站', currentPressure: 0.43, amplitude: 0.04, passRate: 98 },
    { rank: 8, name: '长江路监测点', currentPressure: 0.37, amplitude: 0.03, passRate: 100 }
])

// 方法定义
const handleAlarmClick = () => {
    // 处理报警信息点击
    console.log('查看报警信息')
}

const viewDetail = (row) => {
    // 处理查看详情
    console.log('查看详情:', row.name)
}

// 初始化图表
onMounted(() => {
    // 可以在这里添加图表初始化后的额外操作
})
</script>

<style scoped>
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-header h1 {
    color: #303133;
    font-size: 24px;
    margin: 0;
}

.indicator-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.indicator-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    align-items: center;
    padding: 15px;
}

.card-icon {
    margin-right: 15px;
    font-size: 28px;
    color: #409EFF;
}

.card-text {
    flex: 1;
}

.card-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 5px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
}

.chart-area {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.chart-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
}

.chart-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
}

.time-range {
    font-size: 12px;
    color: #909399;
}

.chart-container {
    width: 100%;
}

.ranking-table {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
}

.table-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
}
</style>